import React, { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import styles from '../style/student.module.css'; 
import left from '../img/left.png';
import Tname from '../img/Tname.png';
import work from '../img/work.png';
import classroom from '../img/classroom.png';
import call from '../img/call.png';
const StudentPage = () => {
  const navigate = useNavigate();
  // 学员管理数据
  const data = [
    {
      teacher: [
        {
          name: "李老师",
          work: "数学老师",
          avatar:
            "https://img0.baidu.com/it/u=4083364085,184046530&fm=253&fmt=auto&app=138&f=JPEG?w=591&h=500",
          tel: "17833946885",
          class: "二年级2班",
        },
      ],
      student: [
        {
          name: "王莎莎",
          avatar:
            "https://img1.baidu.com/it/u=846974505,2191257651&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800",
          tel: "17859444968",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "夏虫",
          avatar:
            "https://img0.baidu.com/it/u=98412296,1661622947&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=304",
          tel: "16883899582",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "白月逢",
          avatar:
            "https://img2.baidu.com/it/u=3869097243,427788015&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=404",
          tel: "1395847669",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "贾浩鑫",
          avatar:
            "https://img2.baidu.com/it/u=3633955580,3964792265&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
          tel: "17558493097",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "沈瑾冰",
          avatar:
            "https://img0.baidu.com/it/u=2194038267,3950714925&fm=253&fmt=auto&app=120&f=JPEG?w=662&h=470",
          tel: "14768002948",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "施悠",
          avatar:
            "https://img0.baidu.com/it/u=3019286834,377581762&fm=253&fmt=auto&app=120&f=JPEG?w=892&h=500",
          tel: "16439875028",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "唐可馨",
          avatar: "https://img95.699pic.com/xsj/0h/te/dj.jpg%21/fh/300",
          tel: "19447802837",
          time: "2023年9月1",
          score: "700",
        },
        {
          name: "李小萌",
          avatar:
            "https://img2.baidu.com/it/u=167491595,1742153016&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200",
          tel: "18549099433",
          time: "2023年9月1",
          score: "700",
        },
      ],
    },
  ];

  const goBack = () => navigate(-1);

  return (
    <div className={styles.student}>
      <div className={styles.top}>
        <div className={styles.top_img} onClick={goBack}>
          <img src={left}/>
        </div>
        <div className={styles.top_text}>打卡任务</div>
      </div>

      {/* Teacher information */}
      <div className={styles.teacher}>
        {/* Left teacher info */}
        <div className={styles.left_message}>
          {data[0].teacher.map((teacher, index) => (
            <React.Fragment key={index}>
              <div className={styles.teacher_part}>
                <img src={Tname} alt="姓名" />
                <div className={styles.title}>姓名：</div>
                <div className={styles.font}>{teacher.name}</div>
              </div>
              <div className={styles.teacher_part}>
                <img src={work} alt="任职" />
                <div className={styles.title}>任职：</div>
                <div className={styles.font}>{teacher.work}</div>
              </div>
              <div className={styles.teacher_part}>
                <img src={classroom} alt="班级" />
                <div className={styles.title}>班级：</div>
                <div className={styles.font}>{teacher.class}</div>
              </div>
              <div className={styles.teacher_part}>
                <img src={call} alt="电话" />
                <div className={styles.title}>联系电话：</div>
                <div className={styles.font}>{teacher.tel}</div>
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* Right teacher image */}
        <div className={styles.teacherImg}>
          <img src={data[0].teacher[0].avatar} alt="老师头像" />
        </div>
      </div>

      {/* Class students title */}
      <div className={styles.students}>班级学员</div>

      {/* Student list */}
      <div className={styles.student_box}>
        {data[0].student.map((student, index) => (
          <div className={styles.student_list} key={index}>
            <div className={styles.avatar}>
              <img src={student.avatar} alt="学生头像" />
            </div>
            <div className={styles.names}>
              <div className={styles.names_top}>{student.name}</div>
              <div className={styles.names_bottom}>{student.tel}</div>
            </div>
            <div className={styles.enrol}>
              <div className={styles.enrol_top}>
                入学时间<span id="time">{student.time}</span>
              </div>
              <div className={styles.enrol_bottom}>积分{student.score}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default StudentPage;
